<div></div>
<div></div>

<style>
  html,
  body {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  div {
    margin: auto;
    width: 60px;
    height: 60px;
    background: linear-gradient(#fc0, #f0c);
    offset-path: path("M 0 0 L 100 0 L 150 0 L 200 100 L 250 0 L 300 100 L 350 0 L 400 100 L 450 0");
    offset-rotate: 0deg;
    animation: move 3000ms infinite alternate linear;
  }

  div:nth-child(2) {
    width: 40px;
    height: 40px;
    offset-path: path('M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80');
    /* offset-path: path('M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10'); */
    offset-rotate: unset;
  }

  @keyframes move {
    0% {
      offset-distance: 0%;
    }

    100% {
      offset-distance: 100%;
    }
  }
</style>